<template>



  <div>

    <el-row>
      <el-col :span="8">

        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <i class="el-icon-s-operation"></i>
            <span style="font-weight: 700;">基础统计</span>
            <!--<el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>-->
          </div>
          <div class="icon-container">
            <div style="background-color: #F0F5F0" class="icon" @click="$router.push('/toAppList')">
              <i class="el-icon-monitor"></i>
              <span class="icon-name">应用管理</span>
              <span class="sub-text">{{homeBaseStatistic.app}}个应用</span>
            </div>

            <div style="background-color: #FAF4ED" class="icon" @click="$router.push('/toComponentList')">
              <i class="el-icon-connection"></i>
              <span class="icon-name">组件管理</span>
              <span class="sub-text">{{homeBaseStatistic.component}}个组件</span>
            </div>

            <div style="background-color: #F0F0F6" class="icon" @click="$router.push('/toSiteList')">
              <i class="el-icon-office-building"></i>
              <span class="icon-name">现场管理</span>
              <span class="sub-text">{{homeBaseStatistic.site}}个现场</span>
            </div>

            <div style="background-color: #F6EFF4" class="icon" @click="$router.push('/toThirdPartyList')">
              <i class="el-icon-school"></i>
              <span class="icon-name">厂商管理</span>
              <span class="sub-text">{{homeBaseStatistic.thirdParty}}家厂商</span>
            </div>

            <div style="background-color: #EFF9FA" class="icon" >
              <i class="el-icon-warning-outline"></i>
              <span class="icon-name">故障上报</span>
              <span class="sub-text">0个待处理</span>
            </div>

            <div style="background-color: #EFF3F9" class="icon" @click="$router.push('/toPersonalPasswordList')">
              <i class="el-icon-lock"></i>
              <span class="icon-name">个人密码箱</span>
              <span class="sub-text">{{homeBaseStatistic.personalPassword}}条记录</span>
            </div>

            <div style="background-color: #E5F2FD" class="icon">
              <i class="el-icon-view"></i>
              <span class="icon-name">巡检管理</span>
              <span class="sub-text">0/5完成</span>
            </div>

            <div style="background-color: #E9F5E9" class="icon" @click="$router.push('/toOpsKnowledgeList')">
              <i class="el-icon-notebook-2"></i>
              <span class="icon-name">知识库</span>
              <span class="sub-text">{{homeBaseStatistic.knowledgeComment}}篇文章</span>
            </div>

            <div style="background-color: #FEF3E0" class="icon" @click="$router.push('/toUserList')">
              <i class="el-icon-user"></i>
              <span class="icon-name">人员管理</span>
              <span class="sub-text">{{homeBaseStatistic.user}}人</span>
            </div>


          </div>
        </el-card>

      </el-col>


      <el-col :span="8">

        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <i class="el-icon-data-line"></i>
            <span style="font-weight: 700;">待办事项</span>
            <!--<el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>-->
          </div>

          <div class="status-grid">
            <div class="status-item">
              <i class="el-icon-warning" style="color:#E6A23C"></i>
              <div class="status-info">
                <div class="status-title">待处理故障</div>
                <div class="status-value blink-text">3</div>
              </div>
            </div>

            <div class="status-item">
              <i class="el-icon-success" style="color:#67C23A"></i>
              <div class="status-info">
                <div class="status-title">今日已处理</div>
                <div class="status-value">37</div>
              </div>
            </div>
          </div>


          <el-row>
            <el-col :span="4">
              <el-tag type="success" size="mini">运维巡检</el-tag>
            </el-col>
            <el-col :span="20">
              <span>102服务器等待巡检，待签到</span>
            </el-col>
          </el-row>
          <br/>

          <el-row>
            <el-col :span="4">
              <el-tag type="warning" size="mini">应用升级提醒</el-tag>
            </el-col>
            <el-col :span="20">
              <span>102服务器已发起"HIS"升级请求</span>
            </el-col>
          </el-row>
          <br/>


          <el-row>
            <el-col :span="4">
              <el-tag type="" size="mini">待验证</el-tag>
            </el-col>
            <el-col :span="20">
              <span>102服务器已发起"HIS"系统bug[编号：10023]已修复，等待校验</span>
            </el-col>
          </el-row>
          <br/>

          <el-row>
            <el-col :span="4">
              <el-tag type="danger" size="mini">告警</el-tag>
            </el-col>
            <el-col :span="20">
              <span>102服务器"HIS"系统告警[错误级别：error]等待处理，请验证处理</span>
            </el-col>
          </el-row>
          <br/>

          <el-row>
            <el-col :span="4">
              <el-tag type="danger" size="mini">其他</el-tag>
            </el-col>
            <el-col :span="20">
              <span>todo 当前功能待开发，暂无此块内容</span>
            </el-col>
          </el-row>
          <br/>

        </el-card>

      </el-col>


      <el-col :span="8">

        <el-card class="box-card" >
          <div slot="header" class="clearfix">
            <i class="el-icon-alarm-clock"></i>
            <span style="font-weight: 700;">进度时间轴</span>
            <!--<el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>-->
          </div>

          <div class="timeline-container">
            <el-timeline >
              <el-timeline-item
                v-for="item in timeLineList"
                :key="item.id"
                :timestamp="item.triggerTime"
                :type="transformLevel(item.level)"
                placement="top">
                <p style="font-size: 10px;">{{ item.event }}</p>
              </el-timeline-item>
            </el-timeline>
          </div>

        </el-card>

      </el-col>
    </el-row>






    <el-row style="margin-top: 10px">



      <!--<el-col :span="16">-->

      <!--  <el-card style="height: 400px; width: 1095px">-->
      <!--    <div slot="header" class="clearfix">-->
      <!--      <i class="el-icon-notebook-2"></i>-->
      <!--      <span>知识库热点</span>-->
      <!--      &lt;!&ndash;<el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>&ndash;&gt;-->
      <!--    </div>-->
      <!--    <p>111</p>-->
      <!--  </el-card>-->

      <!--</el-col>-->

      <el-col :span="8">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <i class="el-icon-notebook-2"></i>
            <span style="font-weight: 700;">知识库热点</span>
          </div>

          <div class="knowledge-container">
            <div class="knowledge-item" v-for="(item, index) in knowledgeList" :key="index">
              <div class="knowledge-icon">
                <i :class="getKnowledgeIcon(item.title)"></i>
              </div>
              <div class="knowledge-content">
                <div class="knowledge-title">
                  <span>{{ item.title }}</span>
                </div>
                <div class="knowledge-meta">
                  <span class="views"><i class="el-icon-view"></i> {{ item.readNum }}次浏览</span>
                  <span class="date">{{ item.createTime }}</span>
                </div>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>



      <el-col :span="8">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <i class="el-icon-star"></i>
            <span style="font-weight: 700;">常用入口</span>
          </div>

          <div class="quick-access-container">
            <!-- 常用现场 -->
            <div class="quick-access-section">
              <div class="section-title">
                <i class="el-icon-office-building"></i>
                <span>常用现场</span>
              </div>
              <div class="access-items">
                <div v-for="(obj, index) in quickAccess.siteList" :key="'site-'+index"
                     class="access-item" @click="navigateToSite(obj)">
                  <div class="item-content">
                    <i class="el-icon-location"></i>
                    <span>{{ obj.siteName }}</span>
                  </div>
                  <i class="el-icon-close remove-icon" @click.stop="delTips(obj)"></i>
                </div>
                <div v-if="quickAccess.siteList.length < 4" class="access-item add-item" @click="showAddDialog(1)">
                  <i class="el-icon-plus"></i>
                  <span v-if="quickAccess.siteList.length === 0">添加快捷现场</span>
                </div>
              </div>
            </div>



            <div class="quick-access-section">
              <div class="section-title">
                <i class="el-icon-news"></i>
                <span>常用产品</span>
              </div>
              <div class="access-items">
                <div v-for="(obj, index) in quickAccess.productList" :key="'product-'+index"
                     class="access-item" @click="navigateToProduct(obj)">
                  <div class="item-content">
                    <i class="el-icon-money"></i>
                    <span>{{ obj.productName }}</span>
                  </div>
                  <i class="el-icon-close remove-icon" @click.stop="delTips(obj)"></i>
                </div>
                <div v-if="quickAccess.productList.length < 4" class="access-item add-item" @click="showAddDialog(3)">
                  <i class="el-icon-plus"></i>
                  <span v-if="quickAccess.productList.length === 0">添加快捷产品</span>
                </div>
              </div>
            </div>



            <div class="quick-access-section">
              <div class="section-title">
                <i class="el-icon-truck"></i>
                <span>常用应用</span>
              </div>
              <div class="access-items">
                <div v-for="(obj, index) in quickAccess.appList" :key="'app-'+index"
                     class="access-item" @click="navigateToApp(obj)">
                  <div class="item-content">
                    <i class="el-icon-cloudy-and-sunny"></i>
                    <span>{{ obj.appName }}</span>
                  </div>
                  <i class="el-icon-close remove-icon" @click.stop="delTips(obj)"></i>
                </div>
                <div v-if="quickAccess.appList.length < 4" class="access-item add-item" @click="showAddDialog(2)">
                  <i class="el-icon-plus"></i>
                  <span v-if="quickAccess.appList.length === 0">添加快捷应用</span>
                </div>
              </div>
            </div>
          </div>

          <!-- 添加常用入口对话框 -->
          <el-dialog :title="'添加'" :visible.sync="showAddDialogVisible" width="40%" >

            <el-select v-model="selectedItem" filterable placeholder="请选择" style="width: 100%" >
              <el-option
                v-for="item in dialogOptList"
                :key="item.id"
                :label="item.name"
                :value="item.id">
              </el-option>
            </el-select>
            <span slot="footer" class="dialog-footer">
              <el-button plain type="warning" @click="saveOpsQuickAccess" >新增</el-button>
              <el-button plain type="primary" @click="showAddDialogVisible = false">关闭</el-button>
            </span>
          </el-dialog>

        </el-card>
      </el-col>



      <el-col :span="8">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <i class="el-icon-notebook-2"></i>
            <span style="font-weight: 700;">常见问题</span>
          </div>

          <div class="knowledge-container">
            <div class="knowledge-item" v-for="(item, index) in questionList" :key="index">
              <div class="knowledge-icon">
                <i :class="getKnowledgeIcon(item.problem)"></i>
              </div>
              <div class="knowledge-content">
                <div class="knowledge-title">
                  <span>{{ item.problem }}</span>
                </div>
                <div class="knowledge-meta">
                  <!--<span class="views"><i class="el-icon-view"></i> {{ Math.floor(Math.random() * 100) + 50 }}次浏览</span>-->
                  <span class="date">{{item.createTime}}</span>
                </div>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>



    </el-row>
















  </div>


</template>

<script>

import http from '@/utils/http'
import vueSeamlessScroll from 'vue-seamless-scroll'

export default {
  // 首页
  name: "Index",
  components: {
    vueSeamlessScroll
  },
  data(){
    return {
      // 首页-基础统计
      homeBaseStatistic:[],
      // 常见问题
      questionList:[],
      // 知识库
      knowledgeList:[],
      // 可选的添加-快捷入口
      dialogOptList: [],
      // 标题-快捷入口
      dialogTitle: null,
      // 快捷入口-选好的,只有一个id
      selectedItem: null,
      // 是否显示弹出框
      showAddDialogVisible: false,
      // 快捷入口=查询返回的数据
      quickAccess: {
        siteList: [],
        appList: [],
        productList: []
      },
      // 当前选择的类型,1,2,3
      dialogType: null,
      // 时间轴
      timeLineList:[],
    }
  },
  methods: {
    /**
     * 快捷入口添加
     * @param type 添加的类型
     */
    showAddDialog(type) {
      this.dialogType = type;
      // 清空选好的
      this.selectedItem = null;
      // 根据类型设置对话框标题和选项
      switch(type) {
        case 1:
          this.dialogTitle = '常用现场';

          http.post("/opsQuickAccess/getByQuickSite", {}).then(response => {
            let res = response.data;
            this.dialogOptList = res.data;
          }).catch(error => {
            this.$message.error (error.message);
          })
          break;

        case 2:
          this.dialogTitle = '常用应用';
          http.post("/opsQuickAccess/getByQuickApp", {}).then(response => {
            let res = response.data;
            this.dialogOptList = res.data;
          }).catch(error => {
            this.$message.error (error.message);
          })
          break;

        case 3:
          this.dialogTitle = '常用产品';
          http.post("/opsQuickAccess/getByQuickProduct", {}).then(response => {
            let res = response.data;
            this.dialogOptList = res.data;
          }).catch(error => {
            this.$message.error (error.message);
          })
          break;
      }
      // 显示
      this.showAddDialogVisible = true;
    },
    /**
     * 删除之前的提示框
     * @param obj 要删除的数据
     */
    delTips(obj) {
      this.$confirm('是否执行删除, 删除后无法恢复，是否继续?', '提示', {
        confirmButtonText: '确定删除',
        cancelButtonText: '取消删除',
        type: 'warning'
      }).then(() => {
        // 确定删除
        this.delOpsQuickAccess(obj)

      }).catch(() => {
        // 取消删除
      });
    },
    /**
     * 删除
     * @param obj 要删除的数据
     */
    delOpsQuickAccess(obj) {
      http.post("opsQuickAccess/delOpsQuickAccess", {
        id: obj.id,
      }).then(response => {
        let res = response.data;
        this.getQuickAccessType()
        this.$message.success("删除成功");

      }).catch(error => {
        this.$message.error (error.message)
      })
    },
    /**
     * 添加一个新的快捷入口
     */
    saveOpsQuickAccess() {
      if (!this.selectedItem) return;
      let submitData = {
        type: this.dialogType,
        bindId: this.selectedItem
      };

      http.post("/opsQuickAccess/saveOpsQuickAccess", submitData).then(response => {
        let res = response.data
        this.$message.success ("保存成功");
        this.getQuickAccessType()
        this.showAddDialogVisible = false

      }).catch(error => {
        this.$message.error (error.message);
      })
    },
    /**
     * 跳转到对应的场所
     * @param obj 现场
     */
    navigateToSite(obj) {
      this.$router.push({path: '/toSiteLayout', query: {siteId: obj.bindId}})
    },
    /**
     * 跳转到产品
     * @param obj 产品
     */
    navigateToProduct(obj) {
      this.$router.push({path: '/toProductLayout', query: {productId: obj.bindId}})
    },
    /**
     * 跳转到应用
     * @param obj 应用
     */
    navigateToApp(obj) {
      this.$router.push({path: '/toAppLayout', query: {appId: obj.bindId}})
    },
    /**
     * 根据标题关键词返回不同图标
     * @param title
     * @returns {string}
     */
    getKnowledgeIcon(title) {
      if (title.includes('MySQL') || title.includes('数据库')) {
        return 'el-icon-s-data';
      } else if (title.includes('Redis') || title.includes('缓存')) {
        return 'el-icon-cpu';
      } else if (title.includes('Nginx') || title.includes('负载均衡')) {
        return 'el-icon-connection';
      } else {
        return 'el-icon-document';
      }
    },
    /**
     * 分支分页查询列表-时间轴
     */
    getListPage() {
      let query = {
        current: 1,
        size: 10,
      }
      http.post("/opsSiteTimeLine/getListPage", query).then(response => {
        let res = response.data;
        // 分页数据
        let data = res.data;
        // 表格数据
        this.timeLineList = data.records

      }).catch(error => {
        this.$message.error (error.message);
      })
    },
    /**
     * 将数字等级转换为页面识别的等级信息
     * @param level
     */
    transformLevel(level){
      if (level === 3) {
        return "danger";

      } else if (level === 2) {
        return "warning";

      } else {
        return "success";
      }
    },
    /**
     * 获取首页统计- 基础统计
     */
    getHomeBaseStatistic() {
      http.post("/home/getHomeBaseStatistic", {}).then(response => {
        let res = response.data;
        let data = res.data;
        // 表格数据
        this.homeBaseStatistic = data

      }).catch(error => {
        this.$message.error (error.message);
      })
    },
    /**
     * 获取首页统计- 常见问题
     */
    getHomeProductQuestion() {
      http.post("/opsProductQuestion/getHomeProductQuestion", {}).then(response => {
        let res = response.data;
        let data = res.data;
        // 表格数据
        this.questionList = data

      }).catch(error => {
        this.$message.error (error.message);
      })
    },
    /**
     * 获取首页统计- 常见问题
     */
    getHomeKnowledge() {
      http.post("/opsKnowledge/getHomeKnowledge", {}).then(response => {
        let res = response.data;
        let data = res.data;
        // 表格数据
        this.knowledgeList = data

      }).catch(error => {
        this.$message.error (error.message);
      })
    },
    /**
     * 获取快捷入口的数据
     */
    getQuickAccess(type){
      http.post("/opsQuickAccess/getQuickList", {
        type: type
      }).then(response => {
        let res = response.data;
        let data = res.data;
        if (type === 1){
          this.quickAccess.siteList = data
        } else if (type === 2){
          this.quickAccess.appList = data
        } else if (type === 3){
          this.quickAccess.productList = data
        }

      }).catch(error => {
        this.$message.error (error.message);
      })
    },
    /**
     * 获取快捷入口的数据
     */
    getQuickAccessType(){
      this.getQuickAccess(1)
      this.getQuickAccess(2)
      this.getQuickAccess(3)
    },
  },
  mounted(){
    this.getListPage()
    this.getHomeBaseStatistic()
    this.getHomeProductQuestion()
    this.getHomeKnowledge()
    this.getQuickAccessType()

    this.$store.commit('navigationListChange', [''])
  },
  computed: {

  },
}
</script>

<style scoped>


.dashboard-container {
  padding: 20px;
  max-width: 1400px;
  margin: 0 auto;
}

.dashboard-row {
  margin-bottom: 20px;
}

.card-header {
  display: flex;
  align-items: center;
  font-weight: bold;
}

.card-header i {
  margin-right: 8px;
  font-size: 18px;
}

.header-text {
  font-size: 16px;
}

/* 快速入口样式 */
.quick-actions-card {
  height: 100%;
}

.icon-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
}

.icon {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 90px;
  border-radius: 8px;
  font-size: 14px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition: all 0.3s;
  background-color: #fff;
  border: 1px solid #ebeef5;
}

.icon:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  border-color: #409EFF;
}

.icon i {
  font-size: 24px;
  margin-bottom: 6px;
}

.icon-name {
  font-size: 12px;
}

.sub-text {
  font-size: 10px !important;
  color: #909399;
  margin-top: 4px;
}

/* 系统健康状态样式 */
.status-card {
  height: 100%;
}

.status-container {
  display: flex;
  flex-direction: column;
  height: calc(100% - 60px);
  padding: 20px;
}

.status-summary {
  margin: 0;
  color: #606266;
  font-size: 14px;
}

.status-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-bottom: 20px;
}

.status-item {
  display: flex;
  align-items: center;
  padding: 15px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.status-item i {
  font-size: 24px;
  margin-right: 12px;
}

.status-info {
  flex: 1;
}

.status-title {
  font-size: 14px;
  color: #909399;
  margin-bottom: 4px;
}

.status-value {
  font-size: 16px;
  font-weight: bold;
}

/* 待办事项样式 */
.todo-card {
  height: 100%;
}

.todo-container {
  height: calc(100% - 60px);
  overflow: hidden;
}

.todo-item {
  margin-bottom: 10px;
}

.todo-title {
  font-size: 14px;
  margin: 0 0 6px 0;
}

.todo-desc {
  font-size: 13px;
  color: #606266;
  margin: 0 0 6px 0;
}

/* 资产统计样式 */
.asset-card {
  height: 100%;
}

.asset-stats {
  display: flex;
  flex-direction: column;
  padding: 20px;
  height: calc(100% - 60px);
}

.asset-summary {
  margin: 0;
  color: #606266;
  font-size: 14px;
}

.stat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 20px;
}

.stat-item {
  padding: 15px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.stat-title {
  margin: 0 0 10px 0;
  font-size: 14px;
  color: #303133;
  border-bottom: 1px solid #ebeef5;
  padding-bottom: 8px;
}

.stat-row {
  display: flex;
  justify-content: space-between;
  margin: 8px 0;
  font-size: 13px;
}

.stat-label {
  color: #606266;
}

.stat-value {
  font-weight: bold;
}

/* 知识库样式 */
/* 知识库热点样式 - 简洁版 */
.knowledge-container {
  max-height: 340px;
  overflow-y: auto;
  padding-right: 8px;
}

.knowledge-item {
  display: flex;
  padding: 12px 0;
  border-bottom: 1px solid #f0f2f5;
  transition: all 0.3s ease;
}

.knowledge-item:hover {
  background: rgba(64, 158, 255, 0.05);
}

.knowledge-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, #409EFF, #64b5ff);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 12px;
  flex-shrink: 0;
}

.knowledge-icon i {
  color: white;
  font-size: 16px;
}

.knowledge-content {
  flex: 1;
  min-width: 0; /* 防止内容溢出 */
}

.knowledge-title {
  font-size: 14px;
  font-weight: 500;
  color: #303133;
  margin-bottom: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.knowledge-meta {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: #909399;
}

.knowledge-meta .views i {
  margin-right: 4px;
}

/* 自定义滚动条 */
.knowledge-container::-webkit-scrollbar {
  width: 4px;
}

.knowledge-container::-webkit-scrollbar-thumb {
  background: rgba(64, 158, 255, 0.5);
  border-radius: 2px;
}

.knowledge-container::-webkit-scrollbar-track {
  background: #f5f5f5;
}


/* 常用入口样式 */
.quick-access-container {
  height: 340px;
  overflow-y: auto;
  padding-right: 8px;
}

.quick-access-section {
  margin-bottom: 20px;
}

.section-title {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  font-size: 14px;
  color: #606266;
}

.section-title i {
  margin-right: 8px;
  font-size: 16px;
}

.access-items {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.access-item {
  position: relative;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fff;
  border-radius: 6px;
  border: 1px solid #ebeef5;
  cursor: pointer;
  transition: all 0.3s;
  padding: 0 10px;
}

.access-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  border-color: #409EFF;
}

.item-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.access-item i {
  font-size: 20px;
  margin-bottom: 5px;
  color: #409EFF;
}

.access-item span {
  font-size: 12px;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.remove-icon {
  position: absolute;
  top: 2px;
  right: 2px;
  font-size: 12px !important;
  color: #F56C6C !important;
  padding: 4px;
  border-radius: 50%;
  background: rgba(245, 108, 108, 0.1);
  opacity: 0;
  transition: opacity 0.3s;
}

.access-item:hover .remove-icon {
  opacity: 1;
}

.add-item {
  background-color: #f5f7fa;
  border: 1px dashed #c0c4cc;
}

.add-item i {
  color: #909399 !important;
}

.add-item:hover {
  border-color: #409EFF;
  background-color: rgba(64, 158, 255, 0.05);
}

/* 自定义滚动条 */
.quick-access-container::-webkit-scrollbar {
  width: 4px;
}

.quick-access-container::-webkit-scrollbar-thumb {
  background: rgba(64, 158, 255, 0.5);
  border-radius: 2px;
}

.quick-access-container::-webkit-scrollbar-track {
  background: #f5f5f5;
}






.box-card {
  width: 540px;
  height: 400px;
}

.blink-text {
  animation: blink 0.5s infinite;
}

@keyframes blink {
  0% { opacity: 1; }
  50% { opacity: 0; }
  100% { opacity: 1; }
}

.timeline-container {
  max-height: 300px;
  height: 300px;
  overflow-y: auto;
  padding-right: 10px; /* 避免滚动条遮挡内容 */
}

/* 自定义滚动条样式（可选） */
.timeline-container::-webkit-scrollbar {
  width: 4px;
}

.timeline-container::-webkit-scrollbar-thumb {
  background: rgba(64, 158, 255, 0.5);
  border-radius: 2px;
}

.timeline-container::-webkit-scrollbar-track {
  background: #f5f5f5;
}


</style>
